<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--uc强制竖屏-->
    <meta name="screen-orientation" content="portrait">
    <!--QQ强制竖屏-->
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no,email=no">
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>活动报名</title>
</head>

<body>
    <div class="hd">
        <a href=""><img src="images/public_lt.png" alt=""></a>
        <h4>活动报名</h4>
    </div>

    <div class='activeApply'>
        <div class='activeApply_top'>
            <img src="./images/activeApply.png" alt="">
            <h2>活动名称活动名称活动名称活动名称活动名称活动名称</h2>
            <h3 class='activeApply_time'>活动名称：<span>2019.11.01</span>~<span>2019.12.02</span></h3>
            <h3 class='activeApply_address'>活动门店：<p><b>南京的基广场店</b><b>南京虹悦城店</b><b>南京仙林金鹰店</b><b>南京江宁景峰店</b></p>
            </h3>
        </div>
        <h3 class='exchange_title'><img src="./images/exchange_title_icon1.png" alt=""><span>商品详情</span><img
                src="./images/exchange_title_icon2.png" alt=""></h3>
        <div class='active_center'>

        </div>
        <p class='activeApply_bottom'><b>抢先下单</b> <img src="./images/luck_btn.png" alt=""></p>
    </div>


    <div class="mask1"></div>
    <div class="index_cover" style='display: none;'>
        <img src="./images/active_close.png" class="active_close">
        <h3 class='txtTittle'>您之前是否玩过乐高？</h3>
            <ul class="active_pick">
                <li class='activeYeah '>是</li>
                <li class='activeNo'>否</li>
            </ul>
            <p class='activeApply_btn'><img src="./images/bind_btn01.png" class="activeApply_bg"><b>确认报名</b></p>
    </div>
    <div class="index_cover1" style="display: none;">
        <img src="./images/active_close.png" class="active_close">
        <img src="./images/activeApply_icon2.png" alt="">
        <h3 class='active_success'>您已成功报名</h3>
       
    </div>

    <script src="js/rem.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(".activeApply_bottom").click(function () {
            $(".mask1").addClass("mask--visible");
            $("html,body").css("overflow", "hidden");
            $(".index_cover").css("display", "block");
        });
        $(".index_cover_btn").click(function () {
            $(".mask1").removeClass("mask--visible");
            $("html,body").css("overflow", "auto");
            $(".index_cover").css("display", "none");
        });

        $('.active_pick li').click(function () {
            $('.activeApply_bg').attr('src', './images/bind_btn02.png')
            if ($('.active_pick li').hasClass('pick_Color')) {
                $('.active_pick li').removeClass('pick_Color')
            }
            $(this).toggleClass('pick_Color')
        })

        $('.activeApply_btn').click(function () {
            $(".mask1").addClass("mask--visible");
            $("html,body").css("overflow", "hidden");
            $(".index_cover").css("display", "none");
            $(".index_cover1").css("display", "block");
        })
        $('.active_close').click(function(){
            $(".mask1").removeClass("mask--visible");
            $("html,body").css("overflow", "auto");
            $(".index_cover").css("display", "none");
            $(".index_cover1").css("display", "none");
        })
    </script>
</body>

</html>